 <template>
  <el-card shadow="always">
    <el-button
      type="primary"
      icon="el-icon-circle-plus-outline"
      @click="showCard"
      >新增</el-button
    >
    <el-divider></el-divider>
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="title" label="菜单名称" width="180">
      </el-table-column>
      <el-table-column prop="icon" label="图标" v-slot="props">
        <template>
          <!-- {{prop .row .icon}} -->
          <i :class="props.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="地址"> </el-table-column>

      <el-table-column prop="status" label="状态" v-slot="props">
        <template>
          <el-button
            v-if="props.row.status == 1"
            type="success"
            plain
            size="mini"
            >正常</el-button
          >
          <el-button
            v-if="props.row.status == 0"
            type="danger"
            plain
            size="mini"
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="props">
        <template>
          <el-button @click="editMenu(props.row)" type="success" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button @click="delMenu(props.row.id)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <modul ref="menuModul" :show_flag="showFlag" @updataMenu="updataMenuParent" ></modul>
  </el-card>
</template>
<script>
import { mapActions, mapState } from "vuex";

import modul from "./modul";
// import Modul from './modul.vue';
export default {
  components: {
    modul,
  },
  data() {
    return {
      menuData: [],
      showFlag: { status: false },
      // 修改数据
      editMenuData: {
        id: 0,
        pid: "",
        title: "",
        icon: "",
        type: "1",
        url: "",
        status: "",
      },
    };
  },
  computed: {
    ...mapState({ menuList: (state) => state.menu.menuList }),
  },
  created() {
    this.menuListAction();
  },
  methods: {
    ...mapActions("menu", ["menuListAction"]),
    showCard() {
      this.showFlag.status = true;
    },
    updataMenuParent() {
      this.menuListAction();
    },
    // 删除功能
    delMenu(id) {
      this.$http
        .post("/menudelete", { id: id })
        .then((res) => {
          if (res.status === 200) {
            this.menuListAction();
          }
        });
    },
    // 修改数据
    editMenu(menu_data) {
     this.$refs["menuModul"].menuForm=menu_data
      this.showFlag.status=true
    }
  },
};
</script>

<style>
.el-card {
  text-align: left;
}
</style>